<template>
  <div class="menuTree">
    <el-form :module="form" label-width="80px">
      <el-form-item label="上级菜单:">
            <treeselect
              v-model="form.parentId"
              :options="menuOptions"
              :normalizer="normalizer"
              :show-count="true"
              placeholder="选择上级菜单"
            />
          </el-form-item>
    </el-form>
  </div>
</template>

<script>
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
  components:{
    Treeselect
  },
  data(){
    return {
      form:{
        parent: 0,   //为0则表示顶级菜单
      },
      // 菜单树选项
      menuOptions: [],
      data: [
        {
          children: [
            {
              component: null,
              icon: "#",
              id: "8083299949227311104",
              label: "账号管理",
              menuType: "C",
              mobileCode: "Account",
              mobileName: "账号管理",
              name: "Account",
              orderNum: 1,
              parentId: "8083282611639787520",
              path: "account",
              perms: "",
              title: "账号管理",
              userList: null
            },
            {
              component: null,
              icon: "#",
              id: "8083300204920471552",
              label: "角色管理",
              menuType: "C",
              mobileCode: "Role",
              mobileName: "角色管理",
              name: "Role",
              orderNum: 2,
              parentId: "8083282611639787520",
              path: "role",
              perms: "",
              title: "角色管理",
              userList: null
            },
            {
              component: null,
              icon: "#",
              id: "8083300264928378880",
              label: "菜单管理",
              menuType: "C",
              mobileCode: "Menu",
              mobileName: "菜单管理",
              name: "Menu",
              orderNum: 3,
              parentId: "8083282611639787520",
              path: "menu",
              perms: "",
              title: "菜单管理",
              userList: null
            }
          ],
          component: null,
          icon: "system",
          id: "8083282611639787520",
          label: "后台管理",
          menuType: "M",
          mobileCode: "System",
          mobileName: "后台管理",
          name: "System",
          orderNum: 9,
          parentId: "0",
          path: "system",
          perms: "",
          title: "后台管理",
          userList: null
        }
      ],
    }
  },
  mounted(){
    this.tableList()
  },
  methods:{
    tableList(){
      const menu = {
          id: 0,
          title: '主类目',
          children: this.data
        }
        this.menuOptions = [menu]
    },
     /** 转换菜单数据结构 */
     normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children
      }
      return {
        id: node.id,
        label: node.title,
        children: node.children
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.menuTree{
  width: 400px;
  height: 200px;
}
</style>